 <template>
  <div>
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="礼品类型" prop="type" :label-width="formLabelWidth">
        <el-select v-model="form.type" style="width:100%" placeholder="请选择" @change="selectClick">
          <el-option
            v-for="item in productOptions"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品" prop="skuId" :label-width="formLabelWidth" v-if="show">
        <el-cascader
          v-model="form.skuId"
          :props="props"
          :show-all-levels="false"
          :options="options"
          placeholder="请选择商品"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="礼品名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="stock" :label-width="formLabelWidth">
        <el-input-number v-model="form.stock" :min="0" :max="1000000000" :precision="0" :step="1" :controls="false"></el-input-number>
      </el-form-item>
      <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
        <el-input type="textarea" :rows="3" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="图片" prop="pic" :label-width="formLabelWidth">
        <el-checkbox-group v-model="form.pic" v-show="false"></el-checkbox-group>
        <el-upload class="avatar-uploader" action :http-request="upload" :show-file-list="false">
          <img v-if="form.pic" :src="form.pic" class="avatar" />
          <i v-else style="line-height: 100px;" class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <el-dialog :visible.sync="dialogVisible" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>-->
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button plain @click="resetForm('formRef')">取消</el-button>
        <el-button type="primary" @click="submitForm('formRef')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    var validate = (rule, value, callback) => {
      if (this.form.type == "1") {
        if (value === "") {
          callback(new Error("请选择商品"));
        }
      }
      callback();
    };
    return {
      formLabelWidth: "120px",
      productOptions: [
        { id: 1, title: "商城商品" },
        { id: 2, title: "非商城商品" }
      ],
      form: {
        skuId: "",
        type: "",
        name: "",
        stock: "",
        remark: "",
        pic: "",
        userId: this.Global.user.userId
      },
      rules: {
        type: [
          { required: true, message: "请选择礼品类型", trigger: "change" }
        ],
        name: [{ required: true, message: "请输入礼品名称", trigger: "blur" }],
        stock: [
          { required: true, message: "请输入库存", trigger: "blur" },
          { type: "number", message: "序号必须为数字值", trigger: "blur" }
        ],
        skuId: [{ required: true, validator: validate, trigger: "blur" }],
        pic: [{ required: true, message: "请选择图片", trigger: "change" }],
        remark: [{ required: true, message: "请填写备注", trigger: "blur" }]
      },
      show: false,
      options: [],
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { value, level } = node;

          if (level == 0) {
            const nodes = this.options.map(item => ({
              value: item.label,
              label: item.value,
              leaf: level >= 1
            }));

            this.$service.firstGoods().then(res => {
              console.log(res);
              let list = res.data;
              // this.options = res;
              let arr = [];
              list.forEach(item => {
                arr.push({
                  value: item.id,
                  label: item.name,

                  leaf: level >= 2
                });
              });
              resolve(arr);
              // console.log(res.obj);
            });
          } else if (level == 1) {
            this.$service.secondGoods(node.value).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.name,
                  leaf: level >= 2
                };
              });
              resolve(nodes);
            });
          } else if (level == 2) {
            var param = {
              tbSpu: {
                cid2: node.value
              }
            };
            this.$service.getCommodityCategory(param).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.title,
                  leaf: level >= 3
                };
              });
              resolve(nodes);
            });
          } else if (level == 3) {
            this.$service.getSkus(node.value).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.title + "/" + item.ownSpec,
                  leaf: level >= 3
                };
              });
              resolve(nodes);
            });
          } else {
            resolve([]);
          }
        }
      }
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    upload(file) {
      this.$service.uploadFileFunction(file, result => {
        //console.log(result);
        this.form.pic = result.url;
      });
    },
    selectClick(e) {
      if (e == "1") {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        console.log(111, valid);
        if (valid) {
          var skuID = "";
          if (this.form.skuId.length > 0) {
            skuID = this.form.skuId[3];
          }
          var form = {
            name: this.form.name,
            skuId: skuID,
            type: this.form.type,
            name: this.form.name,
            stock: this.form.stock,
            remark: this.form.remark,
            pic: this.form.pic,
            userId: this.form.userId
          };
          this.$service.tzGiftInsert(form).then(res => {
            if (res.code == "00000") {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$refs[formName].resetFields();
              this.$emit("submit", false);
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$emit("submit", false);
      this.$refs[formName].resetFields();
    }
  },
  watch: {}
};
</script>
<style scoped>
</style>
  